<template>
    <!-- 路由 -->
    <ElConfigProvider
        :size="size as any"
        :z-index="3000"
        :locale="locale"
    >
        <!-- 进度条 -->
        <NuxtLoadingIndicator :throttle="0" />

        <NuxtLayout>
            <!-- 页面 -->
            <NuxtPage />
        </NuxtLayout>
    </ElConfigProvider>
</template>
<script setup lang="ts">
    import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
    import en from 'element-plus/dist/locale/en.mjs';

    import { useAppStore } from '@/stores/modules/app';

    const { t } = useI18n();

    const size = computed(() => useAppStore().size);

    const language = useCookie('language');
    const locale = computed(() => (language.value === 'zh-CN' ? zhCn : en));

    // 监听语言变化
    watch(
        () => language.value,
        () => {
            // SEO 优化
            useSeoMeta({
                title: t('title'),
                description: t('title'),
                author: t('title'),
            });
        },
        {
            immediate: true,
        },
    );
    // 如果是server,在服务端通过userAgent判断设备类型
    if (process.server) {
        const headers = useRequestHeaders();
        const userAgent = headers['user-agent'];
        const isMobile = /(Android|webOS|iPhone|iPod|tablet|BlackBerry|Mobile)/i.test(userAgent);
        useAppStore().toggleDevice(isMobile ? 'mobile' : 'desktop');
    }
</script>
<style lang="scss">
    @import '@/assets/css/index';

    // 页面过度动画
    .page-enter-active,
    .page-leave-active {
        transition: opacity 0.2s;
    }

    .page-enter-from,
    .page-leave-to {
        opacity: 0;
    }
</style>
